<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-04-18 13:31:18
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-04-20 23:05:48
 * @FilePath: /free-learning-front/src/views/CourseLearningView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="course-learning">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="courseData" class="course-container">
      <!-- 上部分：章节列表和视频播放器 -->
      <div class="learning-container">
        <!-- 左侧章节列表 -->
        <div class="chapters-list">
          <div class="chapters-header">
            <h2>课程章节</h2>
            <div class="progress-info">
              已学习 {{ watchedCount }}/{{ courseData.chaptersNum }} 章节
            </div>
          </div>
          <div class="chapters-content">
            <div
              v-for="chapter in courseData.chapters"
              :key="chapter.id"
              class="chapter-item"
              :class="{ active: currentChapter?.id === chapter.id }"
              @click="switchChapter(chapter)"
            >
              <div class="chapter-info">
                <span class="chapter-order">{{ chapter.chapterOrder }}</span>
                <span class="chapter-name">{{ chapter.chapterName }}</span>
              </div>
              <div class="chapter-status">
                <el-tag size="small" :type="getWatchStatus(chapter)">
                  {{ getWatchStatusText(chapter) }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧视频播放区域 -->
        <div class="video-container">
          <div v-if="currentChapter" class="video-content">
            <div class="video-header">
              <h1>{{ currentChapter.chapterName }}</h1>
              <p class="chapter-des">{{ currentChapter.chapterDes }}</p>
            </div>
            <div class="video-player">
              <div class="video-wrapper">
                <video
                  ref="videoRef"
                  v-if="currentChapter.chapterUrl"
                  :src="currentChapter.chapterUrl"
                  controls
                  @play="handlePlay"
                  @pause="handlePause"
                  @timeupdate="handleTimeUpdate"
                  @ended="handleVideoEnd"
                  @canplay="handleCanplay"
                ></video>
                <!-- 下一集提示 -->
                <div v-if="showNextPrompt" class="next-chapter-prompt">
                  <div class="prompt-content">
                    <h3>本章节学习完成！</h3>
                    <p>即将自动播放下一章节</p>
                    <div class="progress-circle">
                      <el-progress
                        type="circle"
                        :percentage="progressPercentage"
                        :width="60"
                        :stroke-width="6"
                        :show-text="false"
                      />
                      <span class="countdown">{{ countdownSeconds }}s</span>
                    </div>
                    <div class="prompt-actions">
                      <el-button type="primary" @click="playNextChapter"
                        >立即播放</el-button
                      >
                      <el-button @click="cancelAutoPlay">取消</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 点赞按钮 -->
              <div class="video-actions">
                <el-button
                  class="like-course-btn"
                  :type="courseData?.isLike ? 'primary' : 'default'"
                  @click="handleLikeCourse"
                >
  <div>
                    <i
                      class="fas fa-thumbs-up"
                      :style="{
                        color: courseData?.isLike ? '#007bff' : '',
                      }"
                      style="margin-right: 4px"
                    ></i>
                    {{ courseData?.likeCount * 1 || 0 }} 人点赞
                  </div>
                </el-button>
              </div>
            </div>
          </div>
          <div v-else class="empty-state">请选择要学习的章节</div>
        </div>
      </div>

      <!-- 下部分：评论区域 -->
      <div class="comment-section">
        <div class="comment-section-header">
          <h2>课程评论</h2>
          <div class="header-actions">
            <el-radio-group v-model="sortType" @change="handleSortChange" size="small">
              <el-radio-button label="newSort">最新</el-radio-button>
              <el-radio-button label="hotSort">最热</el-radio-button>
            </el-radio-group>
            <el-button :icon="Refresh" circle @click="refreshComments" />
          </div>
        </div>

        <!-- 评论输入框 -->
        <div class="comment-input">
          <el-rate v-model="commentForm.rating" :texts="rateTexts" show-text />
          <el-input
            v-model="commentForm.comment"
            type="textarea"
            :rows="3"
            placeholder="请输入您的评论..."
          />
          <div class="comment-actions">
            <el-button type="primary" @click="submitComment"
              >发表评论</el-button
            >
          </div>
        </div>

        <!-- 评论列表 -->
        <div class="comment-list">
          <el-empty
            v-if="commentList.length === 0"
            description="暂无评论,快来发表你的观点吧！"
          />
          <template v-else>
            <div
              v-for="item in commentList"
              :key="item.id"
              class="comment-item"
            >
              <div class="comment-user">
                <el-avatar :src="item.avatar" />
                <div class="user-info">
                  <span class="nickname">{{ item.nickName }}</span>
                  <div class="rate-container">
                    <el-rate
                      :model-value="item.rating"
                      disabled
                      disabled-void-color="#eee"
                    />
                    <span class="rate-text">{{
                      rateTexts[item.rating - 1]
                    }}</span>
                  </div>
                </div>
                <span class="comment-time">{{
                  formatTime(item.reviewTime)
                }}</span>
              </div>
              <div class="comment-content">{{ item.comment }}</div>
              <!-- 审核状态提示 -->
              <div v-if="item.status === 0" class="review-status">
                <el-tag type="warning" effect="light" size="small"
                  >审核中</el-tag
                >
                <span class="review-tip"
                  >审核通过后其他用户就会看到您的评论啦</span
                >
              </div>
              <div class="comment-actions">
                <span
                  class="like-btn"
                  :class="{ active: item.isLike }"
                  @click="handleLike(item)"
                >
                  <i class="fas fa-thumbs-up"></i>
                  <span>{{ item.likeCount }}</span>
                </span>
                <span
                  v-if="isCurrentUser(item.userId)"
                  class="delete-btn"
                  @click="handleDelete(item.id)"
                >
                  <i class="fas fa-trash"></i>
                  删除
                </span>
              </div>
            </div>

            <!-- 加载更多 -->
            <div v-if="hasMore" class="load-more">
              <el-button link @click="loadMore">加载更多</el-button>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div v-else class="error-message">课程信息不存在或已被删除</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import { rateTexts } from "@/constant/rateTexts";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  queryUserCourseWatchStatus,
  type UserCourseWatchVO,
  type CourseChapters,
  updateCourseUser,
  type UserCourse,
  updateProgress,
  type UserCourseChapter,
  likeCourse,
} from "@/api/user-course";
import {
  queryComment,
  type CourseInfo,
  type CourseReviewVO,
} from "@/api/course";
import moment from "moment";
import { tr } from "element-plus/es/locales.mjs";
import {
  add,
  deleteById,
  like,
  type CourseReview,
  type CourseReviewLike,
} from "@/api/review";
import { useUserStore } from "@/store";
import { Refresh } from "@element-plus/icons-vue";

const route = useRoute();
const courseId = route.query.courseId as string;
const loading = ref(true);
const courseData = ref<UserCourseWatchVO>();
const currentChapter = ref<CourseChapters>();

const showNextPrompt = ref(false);
const countdownSeconds = ref(10);
const progressPercentage = ref(100);
let countdownTimer: number | undefined;
const videoRef = ref<HTMLVideoElement>();
// 计算已观看的章节数
const watchedCount = computed(() => {
  return (
    courseData.value?.chapters.filter(
      (chapter) =>
        // TODO: 根据实际业务逻辑判断章节是否已观看
        false
    ).length || 0
  );
});
const watchedDuration = ref(0);
// 计算已观看的时长
const handleTimeUpdate = (payload: Event) => {
  watchedDuration.value = videoRef.value?.currentTime || 0;
};
// 获取观看状态
const getWatchStatus = (chapter: CourseChapters) => {
  // TODO: 根据实际业务逻辑返回状态
  if (chapter.progress === 0) {
    return "info";
  } else if (chapter.progress === 1) {
    return "success";
  } else {
    return "primary";
  }
};

// 获取观看状态文本
const getWatchStatusText = (chapter: CourseChapters) => {
  // TODO: 根据实际业务逻辑返回状态文本
  if (chapter.progress === 0) {
    return "未开始";
  } else if (chapter.progress === 1) {
    return "已完成";
  } else {
    return "观看中";
  }
};

// 切换章节
const switchChapter = (chapter: CourseChapters) => {
  currentChapter.value = chapter;
};

// 获取下一章节
const nextChapter = computed(() => {
  if (!courseData.value || !currentChapter.value) return null;
  const currentIndex = courseData.value.chapters.findIndex(
    (chapter) => chapter.id === currentChapter.value?.id
  );
  return courseData.value.chapters[currentIndex + 1] || null;
});

// 开始倒计时
const startCountdown = () => {
  countdownSeconds.value = 10;
  progressPercentage.value = 100;

  countdownTimer = setInterval(() => {
    countdownSeconds.value--;
    progressPercentage.value = (countdownSeconds.value / 10) * 100;

    if (countdownSeconds.value <= 0) {
      clearInterval(countdownTimer);
      playNextChapter();
    }
  }, 1000);
};
const watchTimer = ref<number>();
const queryUpdateCourseUser = async () => {
  if (!videoRef.value) {
    clearInterval(watchTimer.value);
    return;
  }
  const params: Partial<UserCourse> = {
    ...courseData.value,
    learningDuration: Number(watchedDuration.value.toFixed(2)),
    currentChapter: currentChapter.value?.chapterOrder,
    lastLearnTime: moment().format("YYYY-MM-DD HH:mm:ss"),
  };
  try {
    const res = await updateCourseUser(params);
    if (res) {
      console.info("更新用户课程观看情况更新成功");
    } else {
      console.error("更新用户课程观看情况更新成功");
    }
  } catch (err) {
    console.error("更新用户课程观看情况更新失败", err);
  }
};
const queryUpdateProgress = async () => {
  if (!videoRef.value) {
    clearInterval(watchTimer.value);
    return;
  }
  const params: Partial<UserCourseChapter> = {
    courseId: courseData.value?.courseId,
    chapterId: currentChapter.value?.id,
    progress: Number(
      (videoRef.value?.currentTime || 0) / (videoRef.value?.duration || 0)
    ),
  };
  console.log(params, "params");
  try {
    const res = await updateProgress(params);
    if (res) {
      console.info("更新进度成功");
    } else {
      console.error("更新进度失败");
    }
  } catch (err) {
    console.error("更新进度失败", err);
  }
};
// 20秒更新一次进度
const startWatchUserWatch = () => {
  watchTimer.value = setInterval(async () => {
    await queryUpdateProgress();
    await queryUpdateCourseUser();
  }, 5 * 1000);
};
const handlePlay = () => {
  void queryUpdateProgress();
  startWatchUserWatch();
};
const handlePause = async () => {
  await queryUpdateProgress();
  await queryUpdateCourseUser();
  clearInterval(watchTimer.value);
};
// 取消自动播放
const cancelAutoPlay = () => {
  showNextPrompt.value = false;
  clearInterval(countdownTimer);
};
const isSteped = ref(false);
const handleCanplay = () => {
  if (courseData.value?.learningDuration && videoRef.value) {
    if (!isSteped.value) {
      videoRef.value.currentTime = courseData.value.learningDuration;
      isSteped.value = true;
    }
  }
};
// 播放下一章节
const playNextChapter = () => {
  if (nextChapter.value) {
    currentChapter.value = nextChapter.value;
    showNextPrompt.value = false;
    clearInterval(countdownTimer);
  }
};

// 视频播放结束
const handleVideoEnd = async () => {
  if (nextChapter.value) {
    showNextPrompt.value = true;
    startCountdown();
  } else {
    ElMessage.success("恭喜你完成所有章节的学习！");
  }
  await queryUpdateProgress;
  await queryUpdateCourseUser;
};
onBeforeUnmount(async () => {});
// 获取课程学习状态
const fetchCourseData = async () => {
  try {
    loading.value = true;
    const res = await queryUserCourseWatchStatus(Number(courseId));
    courseData.value = res;
    if (res.chapters.length > 0) {
      if (res.currentChapter == 0) {
        currentChapter.value = res.chapters[0];
      } else {
        currentChapter.value = res.chapters.find(
          (chapter) => chapter.chapterOrder === res.currentChapter
        );
      }
    }
  } catch (error) {
    console.error("获取课程学习状态失败:", error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchCourseData();
  getCommentList();
});
onBeforeUnmount(() => {
  void queryUpdateCourseUser();
});
// 组件销毁时清理定时器
onUnmounted(() => {
  clearInterval(countdownTimer);
  clearInterval(watchTimer.value);
});

const userStore = useUserStore();
const commentList = ref<CourseReviewVO[]>([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const hasMore = computed(() => commentList.value.length < total.value);

// 评论表单
const commentForm = ref({
  rating: 5,
  comment: "",
});

const sortType = ref<'newSort' | 'hotSort'>('newSort');

// 获取评论列表
const getCommentList = async (isLoadMore = false) => {
  try {
    const res = await queryComment({
      courseId: Number(courseId),
      sortKey: sortType.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    });
    if (isLoadMore) {
      commentList.value.push(...res.records);
    } else {
      commentList.value = res.records;
    }
    total.value = res.total;
  } catch (error) {
    console.error("获取评论列表失败:", error);
  }
};

// 处理排序变化
const handleSortChange = () => {
  pageNum.value = 1;
  getCommentList();
};

// 加载更多
const loadMore = () => {
  pageNum.value++;
  getCommentList(true);
};

// 提交评论
const submitComment = async () => {
  if (!commentForm.value.comment.trim()) {
    ElMessage.warning("请输入评论内容");
    return;
  }

  try {
    const params: CourseReview = {
      courseId: Number(courseId),
      courseName: courseData.value?.courseName || "",
      rating: commentForm.value.rating,
      comment: commentForm.value.comment,
      userId: userStore.userInfo?.userId || 0,
      nickName: userStore.userInfo?.nickname || "",
      consultantId: courseData.value?.consultantId || 0,
      consultantName: courseData.value?.consultantName || "",
      avatar: userStore.userInfo?.avatar || "",
    } as CourseReview;

    const res = await add(params);
    if (res) {
      ElMessage.success("评论成功，评论审核中...");
      commentForm.value.comment = "";
      pageNum.value = 1;
      await getCommentList();
    }
  } catch (error) {
    console.error("提交评论失败:", error);
  }
};

// 点赞评论
const handleLike = async (comment: CourseReviewVO) => {
  if (comment.status === 0) {
    ElMessage.warning("该评论正在审核中，无法点赞");
    return;
  }
  try {
    const params: CourseReviewLike = {
      reviewId: comment.id,
      userId: userStore.userInfo?.userId || 0,
    } as CourseReviewLike;

    const res = await like(params);
    if (res) {
      comment.likeCount = comment.likeCount + (comment.isLike ? -1 : 1);
      comment.isLike = !comment.isLike;
    }
  } catch (error) {
    console.error("点赞失败:", error);
  }
};

// 删除评论
const handleDelete = async (id: number) => {
  try {
    await ElMessageBox.confirm("确定要删除这条评论吗？", "提示", {
      type: "warning",
    });

    const res = await deleteById(id);
    if (res) {
      ElMessage.success("删除成功");
      getCommentList();
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除评论失败:", error);
    }
  }
};

// 判断是否是当前用户的评论
const isCurrentUser = (userId: number) => {
  return userId == userStore.userInfo?.userId;
};

// 格式化时间
const formatTime = (time: string) => {
  return moment(time).format("YYYY-MM-DD HH:mm:ss");
};

// 刷新评论列表
const refreshComments = () => {
  pageNum.value = 1;
  getCommentList();
};

// 课程点赞
const handleLikeCourse = async () => {
  if (!courseData.value) return;

  try {
    const res = await likeCourse(courseData.value.courseId);
    if (res) {
      courseData.value.likeCount =
        Number(courseData.value.likeCount) + (courseData.value.isLike ? -1 : 1);
      courseData.value.isLike = !courseData.value.isLike;
      ElMessage.success(courseData.value.isLike ? "点赞成功" : "已取消点赞");
    }
  } catch (error) {
    console.error("课程点赞失败:", error);
  }
};
</script>

<style scoped>
.course-learning {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.loading,
.error-message {
  text-align: center;
  margin: 50px 0;
  font-size: 18px;
}

.error-message {
  color: #dc3545;
}

.course-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.learning-container {
  display: flex;
  gap: 20px;
}

/* 左侧章节列表样式 */
.chapters-list {
  flex: 0 0 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chapters-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.chapters-header h2 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.progress-info {
  font-size: 14px;
  color: #666;
}

.chapters-content {
  padding: 10px 0;
}

.chapter-item {
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chapter-item:hover {
  background: #f8f9fa;
}

.chapter-item.active {
  background: #e6f3ff;
}

.chapter-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.chapter-order {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: #007bff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.chapter-name {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧视频区域样式 */
.video-container {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.video-content {
  height: 100%;
}

.video-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.video-header h1 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.chapter-des {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.video-player {
  padding: 20px;
  background: #f8f9fa;
}

.video-player video {
  width: 100%;
  border-radius: 8px;
}

.video-wrapper {
  position: relative;
  width: 100%;
}

.next-chapter-prompt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.prompt-content {
  text-align: center;
  padding: 30px;
  border-radius: 8px;
}

.prompt-content h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 500;
}

.prompt-content p {
  margin: 0 0 20px;
  font-size: 14px;
  color: #e0e0e0;
}

.progress-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.countdown {
  position: absolute;
  font-size: 16px;
  font-weight: 500;
}

.prompt-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

:deep(.el-progress-circle) {
  transform: rotate(-90deg);
}

:deep(.el-progress__circle) {
  vertical-align: middle;
}

.empty-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 16px;
}

@media (max-width: 768px) {
  .learning-container {
    flex-direction: column;
  }

  .chapters-list {
    flex: none;
  }

  .video-container {
    width: 100%;
  }
}

/* 评论区域样式 */
.comment-section {
  width: 100%;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.comment-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.comment-section-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.comment-input {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.comment-input :deep(.el-rate) {
  margin-bottom: 16px;
  height: 32px;
  display: flex;
  align-items: center;
}

.comment-input :deep(.el-rate__text) {
  position: relative;
  left: auto;
  margin-left: 10px;
  font-size: 14px;
  color: #666;
}

.comment-input :deep(.el-textarea__inner) {
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.comment-input :deep(.el-textarea__inner:focus) {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.comment-actions {
  margin-top: 16px;
  text-align: right;
}

.comment-list {
  margin-top: 20px;
}

.comment-item {
  padding: 20px;
  border-radius: 8px;
  background: #f8f9fa;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.comment-item:hover {
  background: #f0f2f5;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.comment-user {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.nickname {
  font-weight: 600;
  color: #333;
  font-size: 15px;
  text-align: left;
}

.comment-item :deep(.el-rate) {
  height: 20px;
  line-height: 20px;
}

.comment-item :deep(.el-rate__text) {
  display: none;
}

.comment-time {
  color: #999;
  font-size: 13px;
  margin-left: auto;
}

.comment-content {
  color: #333;
  line-height: 1.6;
  margin: 12px 0;
  font-size: 14px;
  padding: 0 4px;
  text-align: left;
}

.comment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  margin-top: 12px;
}

.like-btn,
.delete-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.like-btn:hover,
.delete-btn:hover {
  background: #e6f3ff;
  color: #007bff;
}

.like-btn.active {
  color: #007bff;
}

.like-btn i,
.delete-btn i {
  font-size: 16px;
}

.load-more {
  text-align: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}
.rate-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rate-text {
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #666;
}

:deep(.el-empty) {
  padding: 40px 0;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 20px 0;
}

:deep(.el-empty__description) {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.review-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 0 4px;
}

.review-tip {
  font-size: 12px;
  color: #666;
}

.video-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.like-course-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.like-course-btn:hover {
  transform: scale(1.05);
}

.like-course-btn :deep(.el-icon) {
  font-size: 16px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style>
